
<template>
  <div class="attention-container">
    <van-list
      v-model:loading="loadingList"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >

    <div class="list-item" v-for="(item, index) in attentionList" :key="item.id">
      <img :src="item.photo" alt="">
      <div class="info">
        <span>{{ item.name }}</span>        
        <p>粉丝数：{{ item.fans_count }}人</p>
      </div>

      <van-button v-if="!item.mutual_follow" round  size="small" type="danger"
        @click="clickFollow(item.id)"
      >关注</van-button>
      <van-button @click="clickCancelFollow(item.id)" round v-else  size="small" color="#F6F8FA">取消关注</van-button>

    </div>
    </van-list>

  </div>
</template>

<script setup lang="ts">
import { getUserFollowList, followUser, getUserFansList, cancelFollowUser } from "@/assets/api/attention";
import { IAttentionListItem, IGetAttentionsParams } from "@/assets/constant/attention";
import { showToast } from "vant";
import { ref } from "vue";



const attentionList = ref([] as IAttentionListItem[])
const loadingList = ref(false)
const finished = ref(false)
const page = ref(1)

const props = defineProps({
  keyTitle: String
})



const getAttentionData = async() => {
  
  const params: IGetAttentionsParams = {
    page: page.value,
    per_page: 10
  }
  let res = {
  data: {
    total_count: 0,
    results: []
  },
  message: ''
  }
  if(props.keyTitle === 'attention') {
    res = await getUserFollowList(params) as any
  } else {
    res = await getUserFansList() as any
  }
  const lens = attentionList.value?.length || 0
  if(res.data?.total_count > lens && lens > 0) {
    if(lens > 0) {
      attentionList.value.push(...res.data?.results)
      page.value++
    }

  } else {
    attentionList.value = res.data?.results || []
  }
}



const onLoad = async() => {
  await getAttentionData()
  finished.value = true

}

const clickFollow = async(id: string) => {

  const res = await followUser(id)
  console.log(res);
  if(res.data?.target?.length > 0) {
    showToast('关注成功')
    attentionList.value.forEach(item => {
      if(item.id === id) {
        item.mutual_follow = true
        return
      }
    })
  } else {
    showToast('关注失败' + res.message || '')
  }

  
}

const clickCancelFollow = async(id: string) => {
  try {
    const res = await cancelFollowUser(id)
    console.log(res);
    showToast('取消成功')
    getAttentionData()

  } catch (error) {
    showToast(JSON.stringify(error))
    
  }
  
}


</script>

<style lang="less">
.attention-container {
  font-size: .28rem;
  .list-item {
    display: flex;
    min-height: 2rem;
    padding: 0 .6rem;
    align-items: center;
    justify-content: space-between;
    & > img {
      width: 1rem;
      height: 1rem;
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        font-weight: 300;

      }
    }

    .van-button {
      min-width: 1.6rem;
      .van-button__text {
        color: #000;

       

      }

    }

  }
}

</style>